<template>
  <div>
    <el-row>
      <el-col :span="12">
        <!-- <h1>haha</h1>
        <img src="../../static/photos/中文img_2483.jpg"> -->
        <div class="grid-content bg-purple">
          <img :src="lotteryimg" :class="{pic: hasPic, blur: hasBlur}">
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <h3 v-for="item in lotterys" :key="item">恭喜 用户：{{ item }}</h3>
        </div>
      </el-col>
    </el-row>
    <el-button type="primary" @click="washCards">洗牌</el-button>
    <el-button type="primary" @click="goscroll">滚动</el-button>
    <el-button type="danger" @click="stopscroll">停</el-button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      sourindex: 0,
      hasPic: true,
      hasBlur: false,
      starting: false,
      lottery1: 0,
      flag: "",
      lotteryimg: "",
      autoplay: false,
      lotterys: [],
      lists: [
        {'pic':'1','src':require('../../static/photos/中文img_2483.jpg')},
{'pic':'2','src':require('../../static/photos/中文img_2484.jpg')},
{'pic':'3','src':require('../../static/photos/中文img_2485.jpg')},
{'pic':'4','src':require('../../static/photos/中文img_2486.jpg')},
{'pic':'5','src':require('../../static/photos/中文img_2487.jpg')},
{'pic':'6','src':require('../../static/photos/中文img_2488.jpg')},
{'pic':'7','src':require('../../static/photos/中文img_2489.jpg')},
{'pic':'8','src':require('../../static/photos/中文img_2490.jpg')},
{'pic':'9','src':require('../../static/photos/中文img_2491.jpg')},
{'pic':'10','src':require('../../static/photos/中文img_2492.jpg')},
{'pic':'11','src':require('../../static/photos/中文img_2493.jpg')},
{'pic':'12','src':require('../../static/photos/中文img_2494.jpg')},
{'pic':'13','src':require('../../static/photos/中文img_2495.jpg')},
{'pic':'14','src':require('../../static/photos/中文img_2496.jpg')},
{'pic':'15','src':require('../../static/photos/中文img_2497.jpg')},
{'pic':'16','src':require('../../static/photos/中文img_2498.jpg')},
{'pic':'17','src':require('../../static/photos/中文img_2499.jpg')},
{'pic':'18','src':require('../../static/photos/中文img_2500.jpg')},
{'pic':'19','src':require('../../static/photos/中文img_2501.jpg')},
{'pic':'20','src':require('../../static/photos/中文img_2502.jpg')},
{'pic':'21','src':require('../../static/photos/中文img_2503.jpg')},
      ],
      animate: false,
      interval: 300,
      interval_1: 1000
    };
  },
  created() {
    //   setInterval不断调用(执行函数, 间隔时间)
  },
  methods: {
    showindex(index, src) {
      console.log(index);
      console.log("轮到索引:" + src);
      this.$message("点了:" + this.sourindex);
      this.lottery = this.lists[this.sourindex].pic;
      //   删除这张图片所在索引
      this.lists.splice(this.sourindex, 1);
      this.$message("现在数组长度" + this.lists.length);
    },
    goscroll() {
      //   this.flag = setInterval(this.scroll,this.interval);
      this.starting = true;
      this.hasBlur = true;
      this.scrollv2();
      console.log(this.starting);
    },
    stopscroll() {
      //   clearInterval(this.flag);
      this.hasBlur = false;
      this.starting = false;
      console.log("停止时图片");
      console.log(this.lists[this.lottery1].src);
      console.log("删除图片");
      this.lotterys.push(this.lists[this.lottery1].pic);
      this.lists.splice(this.lottery1, 1);
    },
    _fomatNum(num) {
      //   格式化成字符，长度补全
      num += "";
      let length = num.length;
      if (length === 1) {
        num = "000" + num;
      }
      if (length === 2) {
        num = "00" + num;
      }
      if (length === 3) {
        num = "0" + num;
      }
      return num;
    },
    washCards() {
      let tmp;
      let j;
      let lottery1;
      for (let i = 0; i < this.lists.length; i++) {
        tmp = this.lists[i];
        j = Math.floor(Math.random() * this.lists.length);
        this.lists[i] = this.lists[j];
        this.lists[j] = tmp;
      }
      console.log("--分隔线--");
      this.lists.forEach(function(item) {
        console.log(item.src);
      });
      this.lists.push(this.lists[0]);
      this.lists.shift();
      console.log("洗牌完成");
      //   console.log(this.lists)
    },
    scrollv2() {
      if (this.starting == false) {
        return false;
      } else if (this.lists.length == 1) {
        this.$message.error("剩下不够抽了");
        return false;
      } else {
        this.lottery1 = Math.floor(Math.random() * this.lists.length);
        // console.log("中奖的是:" + this.lottery1);
        // console.log(this.lists[this.lottery1].src);
        this.lotteryimg = this.lists[this.lottery1].src;
        setTimeout(() => {
          this.scrollv2();
        }, 50);
      }
    },
    sTop() {
      this.autoplay = !this.autoplay;
      this.hasBlur = false;
      console.log("随机数" + Math.floor(Math.random() * 10));
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-row {
  margin-top: 5px;
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  margin-left: 10px;
  /* background: #e5e9f2; */
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.anim {
  transition: all 1.5s;
  margin-top: -34px;
}
.pic {
  width: 640px;
  height: 480px;
}
.blur {
  /* -webkit-filter: blur(1px); Chrome, Opera */
  /* -moz-filter: blur(10px); */
  /* -ms-filter: blur(10px); */
  filter: blur(3px);
}
</style>